<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频教学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/requestUrl.js"></script>
    <style>
        /*.head-choose .container .active {*/
        /*    background-color: #006633;*/
        /*}*/
        .container {
            width: 1230px;
        }
    </style>
</head>

<body>
    <!-- 头部导航 -->
    <div class="head">
        <div style="background: #006633">
            <div class="container">
                <div style="line-height: 30px;color:#fff;position: absolute;font-size:12px;">山东省足球运动协会欢迎您！</div>
                <div class="do">
                    <div class="does1" style="display: block;">
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"><span>登录</span></a>
                        |
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/register.html"><span>注册</span></a>
                    </div>
                    <div class="does2" style="display:none">
                        <span>欢迎<span id="telphone" style="margin:0"></span></span>
                        |
                        <span><a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"
                                id="nickname">个人中心</a></span>
                        |
                        <span class="logout" style="cursor: pointer;">退出</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-choose">
            <div class="container">
                <img src="http://newtest.sdfa.org.cn/webfile//public/headicon.png"
                    style="position: absolute;top: 15px;">
                <a href="http://newtest.sdfa.org.cn/">
                    <div class="headtext">
                        <div class="headtext1">山东省足球运动协会</div>
                        <div class="headtext2">SHANDONG FOOTBALL ASSOCIATION</div>
                    </div>
                </a>
                <div style="display:inline-block;margin-left:302px">
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/index.html?id=67">
                            <div>首页</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/notice.html?id=68">
                            <div>通知公告</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=1">
                                <div>公告规程</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=2">
                                <div>政策法规</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="javascript:void(0);">
                            <div>足球专区</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=70">
                                <div>女足专区</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/prefecture.html?id=71&item=2&child=1">
                                <div>青少年足球</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=72">
                                <div>社会足球</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/otherplace.html?id=87">
                            <div>各地足协</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/shopping/index.htm" target="_blank">
                            <div>商城</div>
                        </a>
                        <div class="choosea-2" target="_blank">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/aboutus.html?id=77">
                            <div>关于我们</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                </div>
                <form action="result.html" method="post">
                    <div class="input-group">
                        <input type="text" name="word" value="" autocomplete="off" class="form-control"
                            placeholder="请输入您要搜索的内容">
                        <span class="glyphicon glyphicon-search" onclick="$('.head form').submit()"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="clear"></div>
    <div class="center" id="video_list">
        <div class="position">当前位置：<a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/video_list.html"
                style="color: #999;text-decoration: underline">视频教学</a>>视频详情
        </div>
        <div class="show">
            <div class="show_left">
                <video src="" id="videoUrl" autoplay="autoplay" controls onended="vipCheck()"></video>
            </div>
            <div class="show_right">
                <p>相关视频</p>
                <ul>
                    <li v-for="item in items" @click="get_video_id(item.id)" :class="id == item.id ? 'active' : ''">
                        <div class="img">
                            <img :src="item.imgUrl" alt="" class="pre">
                            <div class="time">
                                <img src="img/bofang.png" alt="">
                                <span>{{item.videoHour}}</span>
                            </div>
                        </div>
                        <div class="desc">
                            <h1>{{item.title}}</h1>
                            <b>发布时间：{{item.addTime}}</b>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
            <div class="description">
                <p class="title"></p>
                <ul>
                    <li class="UpdateTime">发布时间：<span></span></li>
                    <li class="author">发布人：<span></span></li>
                    <li class="playNum">播放量：<span></span></li>
                </ul>
                <div class="desc">
                    <b>视频简介：</b>
                    <p class="cons"></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer" style="min-width: 100%;">
        <div>
            版权所有：山东省足球运动协会官方网站
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            ICP经营许可证：鲁ICP备15020327号
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            山东乐体网络科技有限公司
        </div>
    </div>
    <script src="js/layer/layer.js"></script>
    <script>
        // 全局缓存global_nickName
        var global_nickName = sessionStorage.nickName;
        var global_userId = sessionStorage.userId;
        if (global_userId) {
            $('.do .does1').css('display', 'none')
            $('.do .does2').css('display', 'block')
        } else if (global_nickName == undefined || global_nickName == "") {
            $('.do .does1').css('display', 'block')
            $('.do .does2').css('display', 'none')
        }
        var global_tel = sessionStorage.tel;
        $("#telphone").text(global_tel)

        function getRequestPrefix() {
            // 获取网络协议
            // 获取主机名+端口号
            var domainPort = window.location.host;
            // 获取发布项目的名称
            // 获取路径
            var url = window.location.pathname;
            var webApp = url.split('/')[1];
            // http://127.0.0.1/demo
            var urlPrefix = "http://" + domainPort + "/" + webApp;
            return urlPrefix;
        }

        function vipCheck() {
            $.ajax({
                url: getRequestPrefix() + "/user/findUserDetail",
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (data) {
                    if (data.msg == "您当前暂未登录，请登录后在操作") {
                        layer.alert(data.msg, {
                            title: "提示",
                            cancel: function () {
                                window.location.href =
                                    "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                            }
                        }, function () {
                            window.location.href =
                                "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                        });
                        return false
                    }
                    if (data.msg == 0) {
                        if (data.isVip == '2') {
                            layer.alert("您是非会员，请认证后查看完整视频", {
                                title: "提示",
                                cancel: function (index) {
                                    layer.close(index)
                                    window.location.href =
                                        "http://newtest.sdfa.org.cn/footballAssociation/zuxie/renzheng.html"
                                }
                            }, function (index) {
                                layer.close(index);
                                window.location.href =
                                    "http://newtest.sdfa.org.cn/footballAssociation/zuxie/renzheng.html"
                            });
                        }
                    } else {
                        layer.alert(data.msg, {
                            title: '提示'
                        })
                    }
                },
                error: function (data) {
                    console.log(data)
                    layer.alert(data.msg, {
                        title: '提示'
                    })
                }
            });
        }

        //退出
        $('.logout').click(function () {
            myAjax('/user/logout', {},
                function (data) {
                    console.log(data)
                    if (data.msg == 0) {
                        sessionStorage.clear()
                        location.reload()
                    }
                },
                function (err) {
                    console.log(err)
                })
        });
        // 获取到上个页面传过来的vodeo_id
        var str = window.location.href
        var num = str.indexOf("?")
        var arr = str.substr(num + 1).split("&");
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i].split("=");
            obj[item[0]] = item[1];
        }
        //上页面传过来的视频id
        var vodeo_id = obj.id
        // vue请求
        var app = new Vue({
            el: "#video_list",
            data: {
                items: [],
                id: '',
            },
            methods: {
                //左侧默认播放上页面传过来的id的视频
                default: function () {
                    myAjax('/user/video/findVideoByVideoId', {
                            id: vodeo_id,
                            userId: global_userId,
                        },
                        function (data) {
                            if (data.msg == "您当前暂未登录，请登录后在操作") {
                                layer.alert(data.msg, {
                                    title: "提示",
                                    cancel: function () {
                                        window.location.href =
                                            "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                                    }
                                }, function () {
                                    window.location.href =
                                        "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                                });
                                return false
                            }
                            if (data.msg == 0) {
                                var videoUrl = ""
                                if (data.video.isVip == '1') {
                                    videoUrl = data.video.vipUrl //视频链接
                                    console.log("1")
                                } else {
                                    videoUrl = data.video.notVipUrl //视频链接
                                    console.log("2")
                                }
                                var title = data.video.title //标题
                                var UpdateTime = data.video.addTime //时间
                                var author = data.video.name //发布人
                                var playNum = data.video.playVideoNum //播放量
                                var cons = data.video.content //内容
                                $("#videoUrl").attr("src", videoUrl);
                                $('.title').html(title)
                                $('.UpdateTime span').html(UpdateTime)
                                $('.author span').html(author)
                                $('.playNum span').html(playNum)
                                $('.cons').html(cons)
                            } else if (data.msg != 0) {
                                layer.alert(data.msg, {
                                    title: '提示'
                                })
                            }
                        },
                        function (err) {
                            console.log(err)
                        })
                },
                //右侧视频列表
                video_list: function () {
                    var that = this;
                    myAjax('/user/video/findVideoDetailList', {},
                        function (data) {
                            console.log(data)
                            that.items = data.videoList
                        },
                        function (err) {
                            console.log(err)
                        })
                },
                //点击右侧视频改变左侧播放
                get_video_id: function (id) {
                    var that = this
                    that.id = id;
                    var vodeo_id = id
                    myAjax('/user/video/findVideoByVideoId', {
                            id: vodeo_id,
                            userId: global_userId,
                        },
                        function (data) {
                            if (data.msg == "您当前暂未登录，请登录后在操作") {
                                layer.alert(data.msg, {
                                    title: "提示",
                                    cancel: function () {
                                        window.location.href =
                                            "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                                    }
                                }, function () {
                                    window.location.href =
                                        "http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"
                                });
                                return false
                            }
                            if (data.msg == 0) {
                                var videoUrl = ""
                                if (data.video.isVip == '1') {
                                    videoUrl = data.video.vipUrl //视频链接
                                    console.log("1")
                                } else {
                                    videoUrl = data.video.notVipUrl //视频链接
                                    console.log("2")
                                }
                                var title = data.video.title //标题
                                var UpdateTime = data.video.addTime //时间
                                var author = data.video.name //发布人
                                var playNum = data.video.playVideoNum //播放量
                                var cons = data.video.content //内容
                                $("#videoUrl").attr("src", videoUrl);
                                $('.title').html(title)
                                $('.UpdateTime span').html(UpdateTime)
                                $('.author span').html(author)
                                $('.playNum span').html(playNum)
                                $('.cons').html(cons)
                            } else if (data.msg != 0) {
                                layer.alert(data.msg, {
                                    title: '提示'
                                })
                            }
                        },
                        function (err) {
                            console.log(err)
                        })
                },
            },
            created: function () {
                this.video_list();
                this.default();
            }
        })
    </script>
</body>

</html>